<template>
    <div :class="`grid ${data.class.col_num} ${data.class.radius}`"
         :style="{'margin-bottom': data.style.margin_bottom+'px',
         'margin-left':data.style.margin_x+'px', 'margin-right': data.style.margin_x+'px', 'background-color': data.style.background}"
    >
        <div class="grid_item" v-for="li in data.list">
            <div :class="`grid_item_img ${data.class.image_radius}`">
                <img class="img" :src="li.image" />
            </div>
            <div>{{li.text}}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    data: any
}>()
</script>

<style scoped lang="scss">
@use "src/views/site/diy/style.css";
</style>
